<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button id="btn01">按钮1</button>

    <hr>

    <ul id="list">
        <li id="swk">孙悟空</li>
        <li id="zbj">猪八戒</li>
        <li id="shs">沙和尚</li>
    </ul>

    <script>

        /* 
            点击按钮后，向ul中添加一个唐僧
        */
        const btn01 = document.getElementById('btn01');
        const list = document.getElementById('list');
        btn01.onclick = function () {
            const li = document.createElement("li");
            li.textContent = "唐僧";
            li.id = "ts";
            // list.appendChild(li);  // 用于给一个节点添加子节点

            // insertAjacentElement()可以向元素的任意位置添加元素
            // 两个参数: 1. 要添加的位置  2. 要添加的元素
            // beforeend 在元素的前边插入元素（兄弟元素）afterend 在元素的后边插入元素（兄弟元素）
            // list.insertAdjacentElement("afterbegin", li);
            list.insertAdjacentHTML("beforeend", '<li id="bgj">唐僧</li>');
        }
    </script>
</body>

</html>